<template>
  <div>
    <el-form size="medium">
      <el-form-item>
        <el-input style="width:200px" size="small" placeholder="商品名称" v-model="pro.name"><el-button slot="append" @click="searchData">搜索</el-button></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-table :data="list" height="500" v-loading="isLoading">
        <el-table-column prop="id" label="直播间ID"></el-table-column>
        <el-table-column prop="title" label="直播间名称"></el-table-column>

        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status | statustxt }}</span>
          </template>
        </el-table-column>
          <el-table-column width="120px" label="操作">
            <template slot-scope="scope">
              <el-button :type="scope.row.checked ? 'primary' : ''" size="small" @click="selectItem(scope.row)">{{ scope.row.checked ? '已选' : '选择' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_footer">
          <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :page-size="10" :total="total"></el-pagination>
        </div>
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
      <el-button @click="outData(false)">取消</el-button>
      <el-button type="primary" @click="outData(true)">确定</el-button>
    </div>
  </div>
</template>

<script>
import {getliveroomlist} from '@/api/mall/liver';
import {fitter_keyword} from '@/utils/index';
import {mapGetters} from 'vuex';
export default {
  name: 'selectProduct',
  data() {
    return {
      isLoading: false,
      radio: 1,
      pro: {
        name: '',

        page: 1,
        size: 10
      },
      proTemp: {},
      list: [],
      //outlist:[],

      Ig_page: 1,
      size: 10,
      total: 0,
      rk: 1,
      tabs: '1',
      Igslist: [],
      Igstotal: 1,
      init: true,
      show: true
    };
  },
  props: {
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    limit: {
      type: Number,
      default: 200
    },
    is_nIg: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters(['addons'])
  },
  filters: {
    statustxt(status) {
      switch (status) {
        case 101:
          return '直播中';
          break;
        case 102:
          return '未开始';
          break;
        case 103:
          return '已结束';
          break;
        case 104:
          return '禁播';
          break;
        case 105:
          return '暂停';
          break;
        case 106:
          return '异常';
          break;
        case 106:
          return '已过期';
          break;
        default:
          return '-';
          break;
      }
    }
  },
  created() {},
  mounted() {
    this.selectlist = JSON.parse(JSON.stringify(this.data));

    this.searchData();
  },
  methods: {

    //搜索数据
    searchData() {
      this.getData();
    },

    //搜索数据本体
    getData() {
      this.isLoading = true;
      this.proTemp = fitter_keyword(this.pro);
      getliveroomlist(this.proTemp).then(res => {
        this.isLoading = false;
        let list = res.msg.data;
        //筛选哪些数据是传入的已选择数据
        list.forEach(e => {
          if (this.selectlist.findIndex(_ => _.id == e.id && _.type == '1') > -1) {
            e.checked = true;
          } else {
            e.checked = false;
          }
          e.type = '1';
        });

        this.list = list;
        this.total = res.msg.total;
      });
    },
    //选择单条记录
    selectItem(item) {
      if (!item.checked) {
        if (this.selectlist.length < this.limit) {
          item.checked = true;
          this.selectlist.push(item);
        } else {
          //数据已满
          // if (this.limit == 1) {
          //   item.checked = true;
          //   this.selectlist.splice(0, 1);
          //   this.selectlist.push(item);
          // }
        }
      } else {
        //移除数据
        item.checked = false;
        this.selectlist.splice(this.selectlist.findIndex(_ => _.id == item.id), 1);
      }
      // this.rk++;
    },
    //切换分页
    changePage(page) {
      this.pro.page = page;
      this.getData();
    },

    //确定选择数据
    outData(type) {
      if (type) {
        this.$emit('outData', this.selectlist);
      } else {
        this.$emit('outData', false);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.product-item {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
</style>
